<template>
	<div class="box">
		<div class="one">
			<el-card class="box-card">
				<template #header>
					<div class="card-header">
						<span>Card name</span>
						<el-button class="button">Operation button</el-button>
					</div>
				</template>
				<Line></Line>
			</el-card>
		</div>
		<div class="two">
			<el-card class="box-card">
				<template #header>
					<div class="card-header">
						<span>Card name</span>
						<el-button class="button">Operation button</el-button>
					</div>
				</template>
				<Bar></Bar>
			</el-card>
			<el-card class="box-card">
				<template #header>
					<div class="card-header">
						<span>Card name</span>
						<el-button class="button">Operation button</el-button>
					</div>
				</template>
				<Pie></Pie>
			</el-card>
		</div>
	</div>
</template>


<script setup>
	import Line from './echarts/line.vue';
	import Bar from './echarts/bar.vue';
	import Pie from './echarts/pie.vue';
</script>

<style scoped lang="less">
	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.box-card {
		margin: 10px;
	}

	.two {
		display: flex;
		justify-content: space-between;

		.box-card {
			flex: 1;
		}
	}
</style>